<template>
  <div>
<!--    <el-descriptions title="用户信息" style="background:#2c3e50;color: #ffffff">-->
<!--      <el-descriptions-item label="用户名" style="background:#E1F3D8;">kooriookami</el-descriptions-item>-->
<!--      <el-descriptions-item label="手机号" style="background:#2c3e50">18100000000</el-descriptions-item>-->
<!--      <el-descriptions-item label="会员" style="background:#2c3e50">-->
<!--        <el-switch-->
<!--            v-model="value1"-->
<!--            disabled>-->
<!--        </el-switch>-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item label="到期时间">-->
<!--        2023-12-1-->
<!--      </el-descriptions-item>-->
<!--    </el-descriptions>-->
    <el-descriptions title="自定义样式列表" :column="3" style="color: #ffffff
" border>
      <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
  </div>

</template>
<script>
export default {
  name: "Main",
  data() {
    return {
      value1: true,
    }
  }
}
</script>
<style scoped>
.my-label {
  background: #E1F3D8;
}

.my-content {
  background: #FDE2E2;
}
</style>